<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="所属区域">
            <agent-list style='width: 100%;' :agentids='params.agentIds' v-on:listenToChildEvent="getAentId" />
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label="日期">
            <pt-date-picker v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ? 12 : 18" style="text-align: right">
          <el-form-item label-wdith="0">
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(15)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap" >
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="agentname" label="区域名称" min-width="120" align="left" />
        <el-table-column prop="name" label="骑手名称" min-width="120" align="center" />
        <el-table-column prop="munber" label="骑手电话" min-width="140" align="center" />
        <el-table-column prop="totalDriverNum" label="配送量" min-width="120" align="center" />
        <el-table-column prop="totalDriverIncome" :label="'配送所得金额('+comConfig.unit+ ')'" min-width="120" align="center">
          <template slot-scope="scope">{{scope.row.totalDriverIncome/100}}</template>
        </el-table-column>
        <el-table-column prop="totalTip" :label="'打赏金额('+comConfig.unit+')'" min-width="120" align="center" />
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="newPage" :pageSize="pageSize" :total="tableData.total" 
          :page-sizes="[15,  30, 45]" background layout="total,sizes, prev, pager, next, jumper" />
      </div>
    </div>
  </div>

</template>

<script>
  import { getDay } from '@/utils/ptkc.js'
  export default {
    data() {
      return {
        params: {
          page: 0,
          size: 15,
          agentIds: [], // 区域
          date:[getDay(-30)+' '+'00:00:00',getDay(0)+' '+'23:59:59']
        },
        restaurants:[], // 区域列表
        isloadingTable: false, // 表单等待
        diyLoading: true, // 自定义等待
        tableData: {}, // 表单数据
        newPage: 1, // 默认分页
        pageSize: 15, // 分页数量
      }
    },
    methods: {
      getAentId(item) { // 获取子组件传递的区域
        this.params.agentIds = item
      },
      handleSizeChange(size) { //切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      },
      handleCurrentChange(page) { //切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      getTableList() { // 获取订单数据
        this.isloadingTable = true
        const params = { ...this.params }
        params.date = params.date? params.date.join(',') : ''
        params.agentIds = params.agentIds.length>0? params.agentIds.join(',') : ''
        this.$http.get('/server/paotui/shopperStatistics/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style scoped>

</style>
